<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2023-05-19 09:07:16
-->
<template>
	<div class="box">{{ msg }}</div>
	<el-button @click="color = 'deeppink'">改变颜色</el-button>
	<Test ref="child" @change="change">
		<div>slot-default</div>
		<template #A>slot-A</template>
	</Test>

	<!-- v-bind -->
	<div class="div"></div>

	<ComputedCom />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Test from './test.vue';
import ComputedCom from '../script-setup/computed.vue';

// InstanceType 可以获取组件暴露的属性方法
const child = ref<InstanceType<typeof Test>>();
const msg = ref('hello world');
const color = ref('teal');

const color2 = ref({ bgColor: 'orange' });

function change(e: string) {
	// eslint-disable-next-line
	alert(e);
}

onMounted(() => {
	console.log(1111, child.value?.name); // pingan8787
});
</script>

<style scoped>
.box {
	/* 绑定颜色 */
	color: v-bind(color);
}

/* TODO 深度选择器 */
:deep(.slot-msg) {
	color: red;
}

/* TODO 查询插槽,不知怎么，我这里不生效 */
:slotted(.slot-msg) {
	color: red;
}

/* TODO 全局选择 */
:global(.slot-color) {
	color: red;
}

/* TODO 动态css */
.div {
	height: 100px;
	background-color: v-bind('color2.bgColor');
}
</style>
